<template>
  <div class="div-content">
    <!-- <div id="mymap" class="map"></div> -->
    <iframe ref="iframe" name="my-iframe" id="my-iframe" src="/map.html" frameborder="0" width="100%" height="100%" scrolling="0" ></iframe>
    <div class="left-buttom" @click="onLeftBottom" v-show="isLeftBottom">
      <a-icon type="menu-unfold" />
    </div>
    <a-drawer
      placement="left"
      :closable="false"
      :visible="visibleLeft"
      :get-container="false"
      :mask="false"
      :width="500"
      :zIndex="8"
      :wrap-style="{ position: 'absolute' }"
    >
      <div class="right-title">
        <span>预警列表</span>
        <a-icon type="menu-fold" @click="onClose()" />
      </div>
      <a-row class="row-content">
        <a-col :span="4" style="width: 14.6%">
          <span>预警时间：</span>
        </a-col>
        <a-col :span="15">
          <!-- <a-range-picker
            style="width: 100%"
            :allowClear="true"
            valueFormat="YYYY-MM-DD"
            v-model="rangePickerTime"
            @change="rangePickerChange"
          /> -->
          <span class="date-range-picker">
            <a-date-picker
              v-model="pageFilter.warningStartTime"
              placeholder="开始日期"
              :disabled-date="disabledStartDate"
              valueFormat="YYYY-MM-DD"
              @openChange="handleOpenChange($event, 'start')"
            />
            <span class="line">-</span>
            <a-date-picker
              v-model="pageFilter.warningEndTime"
              placeholder="结束日期"
              :disabled-date="disabledEndDate"
              valueFormat="YYYY-MM-DD"
              :open="endOpen"
              @openChange="handleOpenChange($event, 'end')"
            />
          </span>
        </a-col>
      </a-row>
      <a-row class="row-content" style="margin-top: 20px; margin-bottom: 10px">
        <a-col :span="10" style="display: flex">
          <span style="line-height: 30px">最新位置：</span>
          <a-input style="width: 60%" placeholder="请输入" v-model="pageFilter.latestLocation" />
        </a-col>
        <a-col :span="10" style="display: flex">
          <span style="line-height: 30px; margin-left: 5px">手机号：</span>
          <a-input style="width: 60%" placeholder="请输入" v-model="pageFilter.victimPhone" />
        </a-col>
        <a-col :span="3">
          <a-button style="margin-left: 2px" type="primary" @click="onQuery"> 查询 </a-button>
        </a-col>
      </a-row>

      <custom-table
        ref="table"
        rowKey="warningEvtid"
        :showAlert="false"
        :showSelection="false"
        :loading="loading"
        :columns="columns"
        size="middle"
        :dataSource="pageData"
        :pagination="{ showSizeChanger: false }"
        @change="onTableChange"
        :customRow="clickCustomRow"
        :rowClassName="rowClassName"
      />
    </a-drawer>

    <a-drawer
      placement="right"
      :closable="false"
      :visible="visibleRight"
      :get-container="false"
      :mask="false"
      :width="350"
      :zIndex="8"
      :wrap-style="{ position: 'absolute' }"
    >
      <div class="right-title">
        <span>受害人详情信息</span>
        <a-icon type="close" @click="onClose('right')" />
      </div>

      <div>
        <div class="right-conten-title">
          <span>网站内容信息</span>
        </div>
        <div class="right-conten">
          <a-space direction="vertical">
            <span>涉诈网站：{{ infoObj.accessDomainName != '' ? infoObj.accessDomainName : '无' }}</span>
            <!-- <span>诈骗二维码：{{ infoObj.domainQrcode != '' ? infoObj.domainQrcode : '无' }}</span> -->
            <div style="position: relative">
              诈骗二维码：
              <a-dropdown
                :trigger="['click']"
                v-model="infoObj.visible"
                @visibleChange="visibleChange(infoObj)"
                v-if="infoObj.accessDomainName"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              >
                <a> <a-icon type="qrcode" style="color: #fff; font-size: 28px" /> </a>
                <div class="custom-ewm" slot="overlay">
                  <div :ref="'qrcode' + infoObj.warningEvtid"></div>
                  <a-button
                    type="primary"
                    block
                    style="margin-top: 10px"
                    @click="savePic(infoObj)"
                    v-if="infoObj.visible"
                  >
                    下载二维码
                  </a-button>
                </div>
              </a-dropdown>
            </div>
            <span>响应码：{{ infoObj.responseCode != '' ? infoObj.responseCode : '无' }}</span>
            <span>涉诈网站标题：{{ infoObj.siteTitle != '' ? infoObj.siteTitle : '无' }}</span>
            <span
              >涉诈网站截图：
              <img
                v-if="infoObj.siteScreenshotUrl"
                :src="`${infoObj.siteScreenshotUrl}`"
                style="max-width: 200px; max-height: 130px"
              />
              <span v-else>无</span>
            </span>
            <span>截图时间：{{ infoObj.screenshotTime != '' ? infoObj.screenshotTime : '无' }}</span>
          </a-space>
        </div>
        <div class="right-conten-title">
          <span>受害人反馈信息</span>
        </div>
        <div class="right-conten">
          <a-space direction="vertical">
            <span>处置方式：{{ filterMultiDictText('disposal_pattern', infoObj.disposalMethod) }}</span>
            <span>劝阻状态：{{ infoObj.dissuadeStatus != '' ? infoObj.dissuadeStatus : '无' }}</span>
            <span>劝阻账号：{{ infoObj.dissuadeUser != '' ? infoObj.dissuadeUser : '无' }}</span>
            <span>反馈验证：{{ infoObj.flagVeriry != '' ? infoObj.flagVeriry : '无' }}</span>
            <span>反馈处理时间：{{ infoObj.feedbackTime != '' ? infoObj.feedbackTime : '无' }}</span>
            <span>劝阻结果：{{ infoObj.feedbackResultString != '' ? infoObj.feedbackResultString : '无' }}</span>
            <div style="display: flex">
              <p>劝阻内容：</p>
              <div
                v-if="infoObj.feedbackResultContent != undefined && infoObj.feedbackResultContent != ''"
                style="flex: 1.6"
              >
                <a-tag
                  size="small"
                  style="margin: 0 5px 5px 0"
                  v-for="(item, index) in infoObj.feedbackResultContent.split(',')"
                  :key="index"
                  >{{ item }}</a-tag
                >
              </div>
              <div v-else>无</div>
            </div>
          </a-space>
        </div>
        <div class="right-conten-title">
          <span>受害人基本信息</span>
        </div>
        <div class="right-conten">
          <a-space direction="vertical">
            <span>预警编号：{{ infoObj.warningNumber != '' ? infoObj.warningNumber : '无' }}</span>
            <span>受害姓名：{{ infoObj.victimName != '' ? infoObj.victimName : '无' }}</span>
            <span>预警等级：{{ infoObj.warningLevel != '' ? infoObj.warningLevel : '无' }}</span>
            <span>诈骗类型：{{ infoObj.fraudType != '' ? infoObj.fraudType : '无' }}</span>
            <span>预警时间：{{ infoObj.warningTime != '' ? infoObj.warningTime : '无' }}</span>
            <span>批次号：{{ infoObj.batchNumber != '' ? infoObj.batchNumber : '无' }}</span>
            <span>受害人身份证号：{{ infoObj.victimIdCard != '' ? infoObj.victimIdCard : '无' }}</span>
            <span>受害人银行账户：{{ infoObj.victimBankAccount != '' ? infoObj.victimBankAccount : '无' }}</span>
            <span>受害人支付宝账号：{{ infoObj.victimAlipayAccount != '' ? infoObj.victimAlipayAccount : '无' }}</span>
            <span>受害人微信账号：{{ infoObj.victimWechatAccount != '' ? infoObj.victimWechatAccount : '无' }}</span>
            <span>受害人QQ号：{{ infoObj.victimQqNumber != '' ? infoObj.victimQqNumber : '无' }}</span>
            <span>受害人IP：{{ infoObj.victimIp != '' ? infoObj.victimIp : '无' }}</span>
            <span>归属省份：{{ infoObj.belongProv != '' ? infoObj.belongProv : '无' }}</span>
            <span>归属城市：{{ infoObj.belongCity != '' ? infoObj.belongCity : '无' }}</span>
            <span>省级：{{ infoObj.prov != '' ? infoObj.prov : '无' }}</span>
            <span>地级：{{ infoObj.city != '' ? infoObj.city : '无' }}</span>
            <span>县级：{{ infoObj.district != '' ? infoObj.district : '无' }}</span>
            <span>乡级：{{ infoObj.township != '' ? infoObj.township : '无' }}</span>
            <span>村级：{{ infoObj.village != '' ? infoObj.village : '无' }}</span>
            <span>机构/部门：{{ infoObj.orgDeptCname != '' ? infoObj.orgDeptCname : '无' }}</span>
            <span
              >定位依据：{{
                infoObj.positioningBasis != '' && infoObj.positioningBasis != null ? infoObj.positioningBasis : '无'
              }}</span
            >
            <span>数据来源：{{ filterMultiDictText('dataSource', infoObj.sourceFrom) }}</span>
            <span>策略编码：{{ infoObj.ployCode != '' ? infoObj.ployCode : '无' }}</span>
            <span>最近联系时间：{{ infoObj.lastConcatTime != '' ? infoObj.lastConcatTime : '无' }}</span>
            <span>下发时间：{{ infoObj.releaseTime != '' ? infoObj.releaseTime : '无' }}</span>
            <span>归属地运营商：{{ infoObj.belongBank != '' ? infoObj.belongBank : '无' }}</span>
            <span>通话次数：{{ infoObj.numberCalls != '' ? infoObj.numberCalls : '无' }}</span>
            <span>通话时长：{{ infoObj.durationCalls != '' ? infoObj.durationCalls : '无' }}</span>
            <span>交易时间：{{ infoObj.tradeTime != '' ? infoObj.tradeTime : '无' }}</span>
            <span>交易金额：{{ infoObj.tradeAmount != '' ? infoObj.tradeAmount : '无' }}</span>
            <span>交易发生地：{{ infoObj.tradeLocation != '' ? infoObj.tradeLocation : '无' }}</span>
            <span>交易结果：{{ infoObj.tradeResult != '' ? infoObj.tradeResult : '无' }}</span>
          </a-space>
        </div>
        <div class="right-conten-title">
          <span>嫌疑人基本信息</span>
        </div>
        <div class="right-conten">
          <a-space direction="vertical">
            <span>嫌疑人姓名：{{ infoObj.suspectsCname ? infoObj.suspectsCname : '无' }}</span>
            <span>嫌疑人身份证号：{{ infoObj.suspectsIdNumber ? infoObj.suspectsIdNumber : '无' }}</span>
            <span>嫌疑人电话号码：{{ infoObj.suspectsPhoneNumber ? infoObj.suspectsPhoneNumber : '无' }}</span>
            <span>嫌疑人银行账号：{{ infoObj.suspectsBankAccount ? infoObj.suspectsBankAccount : '无' }}</span>
            <span>嫌疑人支付宝账号：{{ infoObj.suspectsAlipayAccount ? infoObj.suspectsAlipayAccount : '无' }}</span>
            <span>嫌疑人微信账号：{{ infoObj.suspectsWechatAccount ? infoObj.suspectsWechatAccount : '无' }}</span>
            <span>嫌疑人QQ号：{{ infoObj.suspectsQqNumber ? infoObj.suspectsQqNumber : '无' }}</span>
          </a-space>
        </div>
        <div class="right-conten-title">
          <span>数据接收信息</span>
        </div>
        <div class="right-conten">
          <a-space direction="vertical">
            <span>接收人：{{ infoObj.receiverCname ? infoObj.receiverCname : '无' }}</span>
            <span>接收状态：{{ infoObj.receiveStatus ? infoObj.receiveStatus : '无' }}</span>
            <span>接收时间：{{ infoObj.receivingTime ? infoObj.receivingTime : '无' }}</span>
            <span>历史接收：{{ infoObj.historyReceiver ? infoObj.historyReceiver : '无' }}</span>
          </a-space>
        </div>
        <div class="right-conten-title">
          <span>数据锁定信息</span>
        </div>
        <div class="right-conten">
          <a-space direction="vertical">
            <span>用锁对象：{{ infoObj.lockOperatorName ? infoObj.lockOperatorName : '无' }}</span>
            <span>用锁方式：{{ infoObj.useLockWay ? infoObj.useLockWay : '无' }}</span>
            <span>被锁对象：{{ infoObj.lockForUserName ? infoObj.lockForUserName : '无' }}</span>
          </a-space>
        </div>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import { listMap, getWebsiteScreenshotBy } from '@/api/warning/WarningData.js'
import { getDictItemsFromCache } from '@/api/api'
import QRCode from 'qrcodejs2'
import { isURL } from '@/utils/validate'
export default {
  components: {
    CustomTable,
  },
  data() {
    return {
      endOpen: false,
      visibleRight: false,
      visibleLeft: true,
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
      loading: false,
      isLeftBottom: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          align: 'left',
          width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}`, //序号分页后连续
        },
        {
          title: '手机号',
          dataIndex: 'victimPhone',
          align: 'left',
          width: 120,
        },
        {
          title: '最新位置',
          dataIndex: 'latestLocation',
          align: 'left',
          width: 140,
          customRender: (text, record) => {
            return <j-ellipsis value={text} length={7} />
          },
        },
        {
          title: '预警时间',
          dataIndex: 'warningTime',
          align: 'left',
          width: 160,
        },
      ],
      pageData: [],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      rangePickerTime: [],
      infoObj: {},
      tooltipTop: 0,
      tooltipLeft: 0,
      map: undefined,
      warningEvtid: null,
      qr: '',
      qrcode: '',
      isLocalMap: false, //离线或者在线地图
      iframeId: undefined,
      recordData: this.$route.query.records, //预警速报跳转过来的行数据
    }
  },
  created() {
    let date = new Date()
    let year = date.getFullYear() // 年
    let month = date.getMonth() + 1 // 月
    if (month < 10) {
      month = '0' + month
    }
    let day = date.getDate() // 日
    if (day < 10) {
      day = '0' + day
    }
    let timeStr = year + '-' + month + '-' + day
    //默认查询当前日期
    this.rangePickerTime = [timeStr, timeStr]
    this.$set(this.pageFilter, 'warningStartTime', this.$JMoment(timeStr).format('YYYY-MM-DD'))
    this.$set(this.pageFilter, 'warningEndTime', this.$JMoment(timeStr).format('YYYY-MM-DD'))
    //查询
    this.onQuery()
    //预警速报跳转过来的行数据
    if (this.recordData != undefined) {
      this.infoObj = this.recordData
    }
    //接受map.html传进来的参数,地图下载完成
    window.onmessage = (e) => {
      console.log(e.data)
      this.iframeId = document.getElementById('my-iframe')
      if (this.recordData != undefined) {
        // this.infoObj = {latestLat:"43.9419",latestLng:"125.3919",latestLocation:"aaaaa",latestLocationTime:"2021-10-11",victimPhone:"16643256433",dissuadeUser:"1111111"}
        let arr = []
        arr.push(this.infoObj)
        if (this.iframeId != undefined) {
          this.iframeId.contentWindow.setMarker(arr) //预警速报跳转过来的行数据打点
        }
      }
    }
  },
  async mounted() {
    if (this.recordData != undefined) {
      this.visibleRight = true
    }
  },
  methods: {
    visibleChange(record) {
      if (record.visible) {
        this.qrcode = isURL(record.accessDomainName) ? record.accessDomainName : 'http://' + record.accessDomainName
        // 使用$nextTick确保数据渲染
        this.$nextTick(() => {
          this.crateQrcode(record.warningEvtid)
        })
      } else {
        this.$nextTick(() => {
          let refs = this.$refs['qrcode' + record.warningEvtid]
          this.qr.clear() // 清除二维码
          refs.innerHTML = ''
        })
      }
    },
    crateQrcode(warningEvtid) {
      let refs = this.$refs['qrcode' + warningEvtid]
      this.qr = new QRCode(refs, {
        width: 155,
        height: 155, // 高度
        text: this.qrcode, // 二维码内容
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H,
      })
      this.qr.makeCode(this.qrcode)
    },
    savePic(record) {
      // let myCanvas = document.getElementById("qrcode").getElementsByTagName("canvas");
      let myCanvas = this.$refs['qrcode' + record.warningEvtid].getElementsByTagName('canvas')
      let a = document.createElement('a')
      a.href = myCanvas[0].toDataURL('image/png')
      a.download = '二维码'
      a.click()
    },
    filterDictText(dictCode, text) {
      return this.$filterDictTextByCache(dictCode, text)
    },
    filterMultiDictText(dictCode, text) {
      if (!text) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    clickCustomRow(record, index) {
      return {
        on: {
          // 事件
          click: () => {
            this.visibleRight = true
            this.infoObj = record
            // console.log("this.infoObj")
            // console.log(this.infoObj)
            this.warningEvtid = record.warningEvtid
            this.getWebsite(record.websitesId)
            if (record.latestLng == 0 && record.latestLat == 0) {
              //0的时候地图定位中间位置
              if (this.iframeId != undefined) {
                this.iframeId.contentWindow.moveTo()
              }
            } else {
              if (this.iframeId != undefined) {
                this.iframeId.contentWindow.moveTo({
                  latestLng: this.infoObj.latestLng,
                  latestLat: this.infoObj.latestLat,
                })
              }
            }
          },
        },
      }
    },
    rowClassName(record, index) {
      let className = ''
      if (record.warningEvtid == this.warningEvtid) {
        className = 'row-active'
      }
      return className
    },
    // 预警时间
    rangePickerChange(date, dateString) {
      this.pageFilter.warningStartTime = dateString[0]
      this.pageFilter.warningEndTime = dateString[1]
      this.rangePickerTime = date
    },
    // 预警时间-自定义开始日期【不可选择的日期】
    disabledStartDate(startValue) {
      const endValue = Object.keys(this.pageFilter).length > 0 && this.pageFilter.warningEndTime
        ? this.$JMoment(this.pageFilter.warningEndTime) : null
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    // 预警时间-自定义结束日期【不可选择的日期】
    disabledEndDate(endValue) {
      const startValue = Object.keys(this.pageFilter).length > 0 && this.pageFilter.warningStartTime
      ? this.$JMoment(this.pageFilter.warningStartTime) : null
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    // 预警时间-自定义日期【控制弹层是否展开】
    handleOpenChange(open, status) {
      if (status==='start' && !open) {
        this.endOpen = true
      }
      if (status==='end') {
        this.endOpen = open
      }
    },
    refreshTable() {
      // let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      listMap(this.pageFilter)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
            if (this.iframeId != undefined) {
              // if(this.pageFilter.pageNo == 1){
              //   var arr = [
              //     {
              //       latestLng:"125.3919",
              //       latestLat:"43.9419",
              //       victimPhone:"111111",
              //       latestLocation:"aaaaaa",
              //       latestLocationTime:"2021-11-2"
              //     },
              //     {
              //       latestLng:"125.4817",
              //       latestLat:"43.9419",
              //       victimPhone:"222222",
              //       latestLocation:"bbbbbbb",
              //       latestLocationTime:"2021-11-2"
              //     },
              //     {
              //       latestLng:"125.4800",
              //       latestLat:"43.9110",
              //       victimPhone:"333333",
              //       latestLocation:"ccccc",
              //       latestLocationTime:"2021-11-2"
              //     },
              //   ]
              // }else{
              //   var arr = [
              //     {
              //       latestLng:"125.3819",
              //       latestLat:"43.9419",
              //       victimPhone:"111111",
              //       latestLocation:"aaaaaa",
              //       latestLocationTime:"2021-11-2"
              //     }
              //   ]
              // }
              //不是速报跳过来的情况，全部打点
              if (this.recordData == undefined) {
                this.iframeId.contentWindow.setMarker(this.pageData.records) //打点
                //  this.iframeId.contentWindow.setMarker(arr)
              }
            }
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onTableChange(pagination, filters, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      // pagination.pageNo = pagination.currentPage;
      // this.pageFilter = pagination;
      this.refreshTable()
    },
    onLeftBottom() {
      //this.visibleRight = true
      this.visibleLeft = true
      this.isLeftBottom = false
    },
    onClose(type) {
      if (type === 'right') {
        this.visibleRight = false
      } else {
        this.visibleLeft = false
        this.isLeftBottom = true
      }
    },
    onSelectedRow(keys) {
      this.selectedIds = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    initBmap() {
      // var _MapApp
      // // 构造地图类
      // _MapApp = new EzMap(document.getElementById('mymap'))
      // // 显示地图左侧比例尺控制控件
      // _MapApp.showMapControl()
      // // 设置地图对中中心
      // _MapApp.centerAndZoom(new Point(125.3919, 43.9419), 8)
      // // 添加鹰眼
      // var uOverview = new OverView() // 构造一个鹰眼对象
      // uOverview.width = 200 // 设置鹰眼视窗的宽度
      // uOverview.height = 200 // 设置鹰眼视窗的高度
      // uOverview.minLevel = 5 // 设置鹰眼视窗中最小显示地图级别
      // uOverview.maxLevel = 12 // 设置鹰眼视窗中最大显示地图级别
      // _MapApp.addOverView(uOverview) // 添加鹰眼对象
    },
    // 获取涉诈网站截图
    getWebsite(websitesId) {
      getWebsiteScreenshotBy({ websitesId: websitesId })
        .then((res) => {
          if (res.success && res.result) {
            this.$set(this.infoObj, 'siteScreenshotUrl', res.result)
          }
        })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
  },
}
</script>
<style lang="less" scoped>
.div-content {
  /* height: 600px; */
  overflow: hidden;
  position: relative;
  border: 1px solid #ebedf0;
  border-radius: 2px;
  /* background-color: yellow; */
  width: 100%;
  height: calc(100vh - 90px - 44px);
  // height: calc(100vh - 90px - 64px - 48px);
  // min-height: 800px;
  background-color: #fff;
  position: relative;
}
#map {
  width: 100%;
  height: 100%;
}
.right-title {
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #fff;
  margin-bottom: 10px;
}
.right-conten-title {
  background-color: rgba(102, 101, 100, 0.6);
  padding: 10px;
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 10px;
  border-left: 5px solid rgba(0, 150, 250);
}

.right-conten {
  margin-left: 10px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400px;
  margin-bottom: 10px;
}

.row-content {
  display: flex;
  align-items: center;
  color: #fff;
  margin-left: 10px;
}

.left-buttom {
  position: absolute;
  z-index: 100;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
}
/deep/ .ant-drawer-body {
  padding: 0px;
}
/deep/ .ant-drawer-content {
  background-color: rgba(0, 0, 0, 0.5);
}

/deep/ .ant-input {
  background-color: #00000000;
  color: #fff;
}
/deep/ .ant-calendar-range-picker-separator {
  color: #fff;
}

/deep/ .ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  color: #fff;
  background-color: transparent;
}

/deep/ .ant-table-thead {
  background-color: rgba(0, 0, 0, 0.2);
}

/deep/ .ant-table-placeholder {
  background: rgba(0, 0, 0, 0.2);
}

/deep/ .ant-empty-description {
  color: #fff;
}
/deep/.ant-table-tbody .ant-table-row td {
  color: #fff;
}
/deep/.ant-table-body .ant-table-row.row-active {
  background-color: #fff;
  td {
    color: #000 !important;
  }
}
/deep/.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
  color: #000;
  background-color: #fff;
}
/deep/ .ant-pagination-total-text {
  color: #fff;
  /* margin-top: 20px; */
}
// /deep/ .ant-pagination-prev,
// /deep/.ant-pagination-next,
// /deep/.ant-pagination-options,
// /deep/.ant-pagination-item {
//   margin-top: 20px;
// }
/deep/.ant-table-pagination.ant-pagination {
  padding: 0 20px;
}
/deep/.ant-pagination-options-quick-jumper {
  color: #fff;
}
#tooltip-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0.6) !important;
  border-radius: 4px;
  padding: 15px;
  color: #fff;
}
/deep/.anchorBL {
  z-index: 8 !important;
}
.custom-ewm {
  padding: 14px;
  background-color: #fff;
  border: 1px #ccc solid;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
.date-range-picker {
  width: 312px;
  display: inline-flex;
  align-items: center;
  .ant-calendar-picker {
    min-width: 47% !important;
  }
  .line {
    padding: 0 4px;
  }
  /deep/i.ant-calendar-picker-icon {
    color: #ffffff;
  }
}
</style>
<!--下面style的用处是把命名空间"v"和系统预定义的行为VML连接-->
<style>
v\:* {
  behavior: url(#default#VML);
}
</style>
